<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div>
        <Card>
            <div class="btns">
                <Button v-permission="roles.value" @click="onClick">Super权限</Button>
            </div>
            <div class="btns"><Button @click="onClick">test权限</Button></div>
            <div class="btns"><Button @click="onChangeStatus">切换权限</Button></div>
        </Card>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMassage, GetAeDecryptLocal, GetLocalStrong } from '@/ntils/hooks'
import { Card, Button } from 'ant-design-vue'
import { store } from '@/store/index'

export default defineComponent({
    name: 'Varify',
    components: {
        Card,
        Button,
    },
    setup() {
        let { createMessage } = useMassage()
        let roles = JSON.parse(GetAeDecryptLocal(GetLocalStrong('roles')))
        const onClick = () => {
            createMessage.success(`${roles.value}权限点击`)
        }
        const onChangeStatus = () => {
            let obj = {
                name: 'asd',
                roles: [`${roles.value == 'test' ? 'super' : 'test'}`],
            }
            store.commit('user/USER_LOGIN', obj)
            location.reload()
        }
        return {
            onClick,
            roles,
            onChangeStatus,
        }
    },
})
</script>

<style lang="less" scoped>
.btns {
  margin-left: 1rem;
  display: inline-block;
}
</style>
